<template>
  <div class="background">
    <div class="informationPanel">
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="grid-content panel" id="temperature-panel"></div
        ></el-col>
        <el-col :span="8"
          ><div class="grid-content panel" id="humidity-panel"></div
        ></el-col>
        <el-col :span="8"
          ><div class="grid-content panel" id="illuminance-panel"></div
        ></el-col>
      </el-row>
    </div>
    <div class="background-dock">
      <div class="controlButton">
        <el-row :gutter="20">
          <el-col :span="6">
            <div
              class="layOut grid-content"
              @click="
                layOut('light');
                light_switch();
              "
            >
              <img v-if="lay_type.light" src="../assets/img/3.png" alt />
              <img v-else src="../assets/img/4.png" alt />
            </div>
          </el-col>
          <el-col :span="6">
            <div
              class="layOut grid-content"
              @click="
                layOut('humidifier');
                humidifier_switch();
              "
            >
              <img v-if="lay_type.humidifier" src="../assets/img/5.png" alt />
              <img v-else src="../assets/img/6.png" alt />
            </div>
          </el-col>
          <el-col :span="6">
            <div
              class="layOut grid-content"
              @click="
                layOut('airConditioner');
                airConditioner_switch();
              "
            >
              <img
                v-if="lay_type.airConditioner"
                src="../assets/img/7.png"
                alt
              />
              <img v-else src="../assets/img/8.png" alt />
            </div>
          </el-col>
          <el-col :span="6">
            <div
              class="layOut grid-content"
              @click="
                layOut('curtain');
                curtain_switch();
              "
            >
              <img v-if="lay_type.curtain" src="../assets/img/1.png" alt />
              <img v-else src="../assets/img/2.png" alt />
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import mqtt from "mqtt";
// mqtt连接服务器
var client;
var TemperatureChart;
var HumidityChart;
var IlluminanceChart;
const options = {
  port: 8083,
  connectTimeout: 4000,
  clientId:
    "mqtt_" +
    Math.random()
      .toString(16)
      .substr(2, 8)
};
client = mqtt.connect("ws://39.106.138.28/mqtt", options);

export default {
  name: "controlPanel",
  data() {
    return {
      lay_type: {
        light: 0,
        airConditioner: 0,
        curtain: 0,
        humidifier: 0
      },
      //逻辑控制
      message: "",
      light_Status: 0,
      airConditioner_Status: 0,
      curtain_Status: 0,
      humidifier_Status: 0,
      humidity: "60",
      temperature: "26",
      illuminance: "350",
      dhttopic: "/classroom/105/humiture",
      luxtopic: "/classroom/105/illuminance"
    };
  },
  created() {
    this.mqttMsg();
  },
  computed: {},
  mounted() {
    this.drawTemperaturePanel();
    this.drawHumidityPanel();
    this.drawIlluminancePanel();
    this.drawPanel();
  },
  methods: {
    drawPanel() {
      setInterval(() => {
        TemperatureChart.setOption({
          series: [
            {
              data: [
                {
                  value: this.temperature
                }
              ]
            }
          ]
        });
        HumidityChart.setOption({
          series: [
            {
              data: [
                {
                  value: this.humidity
                }
              ]
            }
          ]
        });
        IlluminanceChart.setOption({
          series: [
            {
              data: [
                {
                  value: this.illuminance
                }
              ]
            }
          ]
        });
      }, 5000);
    },
    layOut(str) {
      console.log(str);
      for (let key in this.lay_type) {
        if (str == key) {
          console.log(this.lay_type[key]);
          if (this.lay_type[key] == 0) {
            this.lay_type[key] = 1;
          } else {
            this.lay_type[key] = 0;
          }
        }
      }
    },
    mqttMsg() {
      client.on("connect", e => {
        console.log("连接成功");
        client.subscribe("/classroom/105/humiture", { qos: 0 });
        client.subscribe("/classroom/105/illuminance", { qos: 0 });
      });
      client.on("message", (topic, message) => {
        // console.log("收到来自", topic, "的消息", message.toString());
        var msg = message.toString();
        //如果是温湿度主题的消息
        if (topic == this.dhttopic) {
          console.log("温湿度:" + msg);
          //假设上传的数据为#23#45#，其中温度是23，湿度45，led为关闭状态
          if (msg.indexOf("#") != -1) {
            //如果数据里包含#号，表示获取的是传感器值，因为单片机上传数据的时候用#号进行了包裹
            //如果有#号就进行字符串分割
            var all_data_arr = msg.split("#"); //分割数据，并把分割后的数据放到数组里。
            this.temperature = all_data_arr[2]; //赋值温度
            this.humidity = all_data_arr[1]; //赋值湿度
          }
        }
        //如果是光照度主题的消息
        if (topic == this.luxtopic) {
          this.illuminance = message.toString();
          console.log("光照度:" + msg);
        }
        //打印消息
        // console.log("收到消息：" + msg);
      });
      client.on("reconnect", error => {
        console.log("正在重连", error);
      });
      client.on("error", error => {
        console.log("连接失败", error);
      });
    },
    //灯的开关
    light_switch() {
      console.log("灯_开关");
      console.log(this.light_Status);
      if (this.light_Status == 0) {
        client.publish("/classroom/105/light_1", "on", {
          qos: 0,
          rein: false
        });
        this.light_Status = 1;
      } else {
        client.publish("/classroom/105/light_1", "off", {
          qos: 0,
          rein: false
        });
        this.light_Status = 0;
      }
    },
    //窗帘的开关
    curtain_switch() {
      console.log("窗帘_开关");
      console.log(this.curtain_Status);
      if (this.curtain_Status == 0) {
        client.publish("/classroom/105/curtain", "on", {
          qos: 0,
          rein: false
        });
        this.curtain_Status = 1;
      } else {
        client.publish("/classroom/105/curtain", "off", {
          qos: 0,
          rein: false
        });
        this.curtain_Status = 0;
      }
    },
    //空调开关
    airConditioner_switch() {
      console.log("空调_开关");
      console.log(this.airConditioner_Status);
      if (this.airConditioner_Status == 0) {
        client.publish("/classroom/105/airConditioner", "on", {
          qos: 0,
          rein: false
        });
        this.airConditioner_Status = 1;
      } else {
        client.publish("/classroom/105/airConditioner", "off", {
          qos: 0,
          rein: false
        });
        this.airConditioner_Status = 0;
      }
    },
    //加湿器开关
    humidifier_switch() {
      console.log("加湿器_开关");
      console.log(this.humidifier_Status);
      if (this.humidifier_Status == 0) {
        client.publish("/classroom/105/humidifier", "on", {
          qos: 0,
          rein: false
        });
        this.humidifier_Status = 1;
      } else {
        client.publish("/classroom/105/humidifier", "off", {
          qos: 0,
          rein: false
        });
        this.humidifier_Status = 0;
      }
    },
    drawTemperaturePanel() {
      if (document.getElementById("temperature-panel") == null) {
        return;
      }
      echarts.dispose(document.getElementById("temperature-panel"));
      TemperatureChart = echarts.init(
        document.getElementById("temperature-panel")
      );
      TemperatureChart.setOption({
        series: [
          {
            type: "gauge",
            center: ["50%", "60%"],
            startAngle: 200,
            endAngle: -20,
            min: -20,
            max: 40,
            splitNumber: 12,
            itemStyle: {
              color: "#FFAB91"
            },
            progress: {
              show: true,
              width: 30
            },
            pointer: {
              show: false
            },
            axisLine: {
              lineStyle: {
                width: 30
              }
            },
            axisTick: {
              distance: -45,
              splitNumber: 5,
              lineStyle: {
                width: 2,
                color: "#111"
              }
            },
            splitLine: {
              distance: -52,
              length: 22,
              lineStyle: {
                width: 3,
                color: "#111"
              }
            },
            axisLabel: {
              distance: -20,
              color: "#111",
              fontSize: 14
            },
            anchor: {
              show: false
            },
            title: {
              show: false
            },
            detail: {
              valueAnimation: true,
              width: "60%",
              lineHeight: 40,
              height: "15%",
              borderRadius: 8,
              offsetCenter: [0, "-15%"],
              fontSize: 60,
              fontWeight: "bolder",
              formatter: "{value}°C",
              color: "auto"
            },
            data: [
              {
                value: this.temperature
              }
            ]
          }
        ]
      });
    },
    drawHumidityPanel() {
      if (document.getElementById("humidity-panel") == null) {
        return;
      }
      echarts.dispose(document.getElementById("humidity-panel"));
      HumidityChart = echarts.init(document.getElementById("humidity-panel"));
      HumidityChart.setOption({
        series: [
          {
            type: "gauge",
            center: ["50%", "60%"],
            startAngle: 200,
            endAngle: -20,
            min: 0,
            max: 100,
            splitNumber: 10,
            itemStyle: {
              color: "#0066ff"
            },
            progress: {
              show: true,
              width: 30
            },

            pointer: {
              show: false
            },
            axisLine: {
              lineStyle: {
                width: 30
              }
            },
            axisTick: {
              distance: -45,
              splitNumber: 5,
              lineStyle: {
                width: 2,
                color: "#111"
              }
            },
            splitLine: {
              distance: -52,
              length: 22,
              lineStyle: {
                width: 3,
                color: "#111"
              }
            },
            axisLabel: {
              distance: -20,
              color: "#111",
              fontSize: 14
            },
            anchor: {
              show: false
            },
            title: {
              show: false
            },
            detail: {
              valueAnimation: true,
              width: "60%",
              lineHeight: 40,
              height: "15%",
              borderRadius: 8,
              offsetCenter: [0, "-15%"],
              fontSize: 60,
              fontWeight: "bolder",
              formatter: "{value}Rh",
              color: "auto"
            },
            data: [
              {
                value: this.humidity
              }
            ]
          }
        ]
      });
    },
    drawIlluminancePanel() {
      if (document.getElementById("illuminance-panel") == null) {
        return;
      }
      echarts.dispose(document.getElementById("illuminance-panel"));
      IlluminanceChart = echarts.init(
        document.getElementById("illuminance-panel")
      );
      IlluminanceChart.setOption({
        series: [
          {
            type: "gauge",
            center: ["50%", "60%"],
            startAngle: 200,
            endAngle: -20,
            min: 0,
            max: 1000,
            splitNumber: 10,
            itemStyle: {
              color: "#ffcb33"
            },
            progress: {
              show: true,
              width: 30
            },
            pointer: {
              show: false
            },
            axisLine: {
              lineStyle: {
                width: 30
              }
            },
            axisTick: {
              distance: -45,
              splitNumber: 5,
              lineStyle: {
                width: 2,
                color: "#111"
              }
            },
            splitLine: {
              distance: -52,
              length: 22,
              lineStyle: {
                width: 3,
                color: "#111"
              }
            },
            axisLabel: {
              distance: -20,
              color: "#111",
              fontSize: 14
            },
            anchor: {
              show: false
            },
            title: {
              show: false
            },
            detail: {
              valueAnimation: true,
              width: "60%",
              lineHeight: 40,
              height: "15%",
              borderRadius: 8,
              offsetCenter: [0, "-15%"],
              fontSize: 60,
              fontWeight: "bolder",
              formatter: "{value}Lux",
              color: "auto"
            },
            data: [
              {
                value: this.illuminance
              }
            ]
          }
        ]
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}

.background {
  position: fixed;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(to top left, #f2f2f2, #4a4848);
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.background-dock {
  position: fixed;
  bottom: 10vh;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 1124px;
  height: 273px;
  background-image: url(../assets/img/0.png);
  background-size: 100% 100%;
}
.controlButton {
  padding-top: 50px;
}
.panel {
  margin: 0 auto;
  height: 400px;
}
.informationPanel {
  margin-top: 10vh;
  width: 98%;
}
</style>
